<template>
  <list-layout>
    <div slot="search">
      <el-form :model="queryParams"
               :inline="true"
               label-position="right"
               ref="queryForm"
               v-show="showSearch"
               label-width="88px">
        <el-form-item :label="$t('inspectionManagement.materialName')"
                      prop="materialName">
          <el-input v-model="queryParams.materialName"
                    :placeholder="
                      $t('public.placeholder', {
                        placeholder: $t('inspectionManagement.materialName'),
                      })
                    "
                    size="small"
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('inventoryManagement.materialNo')"
                      prop="materialCode">
          <el-input v-model="queryParams.materialCode"
                    :placeholder="
                      $t('public.placeholder', {
                        placeholder: $t('inventoryManagement.materialNo'),
                      })
                    "
                    size="small"
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('inventoryManagement.supplierName')"
                      prop="supplierName">
          <el-input v-model="queryParams.supplierName"
                    :placeholder="
                      $t('public.placeholder', {
                        placeholder: $t('inventoryManagement.supplierName'),
                      })
                    "
                    size="small"
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('specimen.sampleStage')"
                      prop="sampleStage">
          <el-select v-model="queryParams.sampleStage"
                     :placeholder="$t('public.selectPl')"
                     style="width:200px;"
                     clearable
                     size="small">
            <el-option v-for="(item,index) in sampleStageList"
                       :key="index"
                       :label="item.name"
                       :value="item.val" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('inspectionManagement.plantArea')"
                      prop="factoryName">
          <el-select v-model="queryParams.factoryName"
                     :placeholder="$t('public.select_holder',{select_holder: $t('inspectionManagement.plantArea')})"
                     style="width:200px"
                     filterable
                     clearable
                     size="small">
            <el-option v-for="(item) in factoryList"
                       :key="item.factoryName"
                       :label="item.factoryName"
                       :value="item.factoryName" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.status')"
                      prop="sampleState">
          <el-select v-model="queryParams.sampleState"
                     style="width:200px"
                     :placeholder="
                      $t('public.select_holder', {
                        select_holder: $t('public.status'),
                      })
                    "
                     size="small">
            <el-option v-for="(item,index) in sampleStateList"
                       :key="index"
                       :label="item.name"
                       :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('specimen.sealingDate')"
                      prop="sealingDate">
          <el-date-picker v-model="dateRange"
                          size="small"
                          style="width: 300px"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          autocomplete="off"
                          range-separator="-"
                          :start-placeholder="$t('public.startTime')"
                          :end-placeholder="$t('public.endTime')"></el-date-picker>
        </el-form-item>

      </el-form>
      <div style="display: flex; justify-content: center">
        <el-button type="primary"
                   icon="el-icon-search"
                   class="search"
                   size="mini"
                   @click="handleQuery">{{ $t("public.search") }}</el-button>
        <el-button icon="el-icon-refresh"
                   class="resectBtn"
                   size="mini"
                   @click="resetQuery">{{ $t("public.reset") }}</el-button>
      </div>
    </div>
    <div>
      <div class="container-header">
        <div class="header-left">
          {{ $t("specimen.specimenList") }}
        </div>
      </div>
      <el-row style="position: relative; top: 12px">
        <el-col :span="24">
          <el-row :gutter="10"
                  class="mb8 btnGroup">
            <el-col :span="1.5">
              <el-button type="primary"
                         icon="el-icon-plus"
                         size="mini"
                         @click="handleAdd">
                {{ $t("public.add") }}
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-setting"
                         size="mini"
                         class="deleteitemBtn"
                         @click="handleScrap">{{ $t("specimen.scrap") }}</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-delete"
                         size="mini"
                         class="deleteitemBtn"
                         @click="handleBatchDelete">{{$t('public.delete')}}</el-button>
            </el-col>
          </el-row>
          <div class="container-table">
            <el-table :height="tableHeight"
                      border
                      v-loading="loading"
                      ref="multipleTable"
                      :data="planList"
                      @selection-change="handlePlanChange"
                      :row-class-name="tableRowClassName">
              <el-table-column type="selection"
                               width="55"
                               align="center"
                               fixed="left" />
              <el-table-column :label="$t('public.serialNum')"
                               type="index"
                               align="center">
                <template slot-scope="scope">
                  <span>{{
                        (queryParams.pageNum - 1) * queryParams.pageSize +
                        scope.$index +
                        1
                      }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable
                               :label="$t('public.status')"
                               align="left"
                               width="80"
                               prop="sampleState"
                               :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{statusfilter(scope.row)}}</span>
                </template>
              </el-table-column>
              <el-table-column sortable
                               :label="$t('inspectionManagement.factory')"
                               width="140"
                               align="left"
                               prop="factoryName"
                               :show-overflow-tooltip="true" />
              <el-table-column sortable
                               :label="$t('inventoryManagement.materialName')"
                               align="left"
                               width="150"
                               prop="materialName"
                               :show-overflow-tooltip="true" />
              <el-table-column sortable
                               :label="$t('inventoryManagement.materialNo')"
                               align="left"
                               width="120"
                               :show-overflow-tooltip="true"
                               prop="materialCode" />
              <el-table-column sortable
                               :label="$t('inventoryManagement.supplierName')"
                               align="left"
                               width="120"
                               :show-overflow-tooltip="true"
                               prop="supplierName" />
              <el-table-column sortable
                               :label="$t('specimen.drawingVersion')"
                               align="left"
                               width="95"
                               :show-overflow-tooltip="true"
                               prop="drawingVersion" />
              <el-table-column sortable
                               :label="$t('specimen.sampleStage')"
                               align="center"
                               prop="sampleStage"
                               width="95">
                <template slot-scope="scope">
                  <span>{{samplefilter(scope.row)}}</span>
                </template>
              </el-table-column>
              <el-table-column sortable
                               :label="$t('specimen.sealingDate')"
                               align="left"
                               prop="sealingDate"
                               minWidth="120"
                               :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ !!scope.row.sealingDate ? scope.row.sealingDate.substring(0,10):"" }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable
                               :label="$t('specimen.effectiveDate')"
                               align="left"
                               prop="effectiveDate"
                               minWidth="120"
                               :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ !!scope.row.effectiveDate ? scope.row.effectiveDate.substring(0,10):"" }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable
                               :label="$t('public.creator')"
                               align="center"
                               prop="createBy"
                               width="100"
                               :show-overflow-tooltip="true" />
              <el-table-column sortable
                               :label="$t('mtool.respName')"
                               align="center"
                               prop="respName"
                               width="100"
                               :show-overflow-tooltip="true" />
              <el-table-column sortable
                               :label="$t('public.remark')"
                               align="center"
                               prop="mentRemark"
                               width="140"
                               :show-overflow-tooltip="true" />
              <el-table-column sortable
                               :label="$t('public.opera')"
                               fixed="right"
                               align="center"
                               width="180">
                <template slot-scope="scope">
                  <div class="action-wrap">
                    <table-body-btn type="gwview"
                                    :name="$t('home.view')"
                                    @click.native="handleView(scope.row)" />
                    <table-body-btn :name="$t('public.replace')"
                                    type="copy"
                                    @click.native="handleEdit(scope.row)" />
                    <table-body-btn :name="$t('public.delete')"
                                    type="gwdelete"
                                    @click.native="handleDelete(scope.row)" />
                    <table-body-btn name="历史记录"
                                    type="view"
                                    @click.native="history(scope.row)" />
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <pagination v-show="total > 0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                        layout="total, sizes, prev, pager, next, jumper" />
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="historyShow"
               title="历史记录"
               @close="handleClose"
               center
               top="14vh"
               width="1200px"
               append-to-body
               :fullscreen="fullscreen">
      <el-table border
                :data="historyList">
        <el-table-column sortable
                         :label="$t('public.status')"
                         align="left"
                         width="80"
                         prop="sampleState"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{statusfilter(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable
                         :label="$t('inventoryManagement.materialName')"
                         align="left"
                         width="150"
                         prop="materialName"
                         :show-overflow-tooltip="true" />
        <el-table-column sortable
                         :label="$t('inventoryManagement.materialNo')"
                         align="left"
                         width="120"
                         :show-overflow-tooltip="true"
                         prop="materialCode" />
        <el-table-column sortable
                         :label="$t('inventoryManagement.supplierName')"
                         align="left"
                         width="120"
                         :show-overflow-tooltip="true"
                         prop="supplierName" />
        <el-table-column sortable
                         :label="$t('specimen.sampleStage')"
                         align="center"
                         prop="sampleStage"
                         width="95">
          <template slot-scope="scope">
            <span>{{samplefilter(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable
                         :label="$t('specimen.sealingDate')"
                         align="left"
                         prop="sealingDate"
                         minWidth="120"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ !!scope.row.sealingDate ? scope.row.sealingDate.substring(0,10):"" }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable
                         :label="$t('specimen.effectiveDate')"
                         align="left"
                         prop="effectiveDate"
                         minWidth="120"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ !!scope.row.effectiveDate ? scope.row.effectiveDate.substring(0,10):"" }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable
                         :label="$t('inspectionManagement.factory')"
                         width="140"
                         align="left"
                         prop="factoryName"
                         :show-overflow-tooltip="true" />
        <el-table-column sortable
                         :label="$t('public.creator')"
                         align="center"
                         prop="createBy"
                         width="100"
                         :show-overflow-tooltip="true" />
        <el-table-column sortable
                         :label="$t('mtool.respName')"
                         align="center"
                         prop="respName"
                         width="100"
                         :show-overflow-tooltip="true" />
        <el-table-column sortable
                         :label="$t('public.remark')"
                         align="center"
                         prop="mentRemark"
                         width="140"
                         :show-overflow-tooltip="true" />
        <el-table-column sortable
                         :label="$t('public.opera')"
                         fixed="right"
                         align="center"
                         width="80">
          <template slot-scope="scope">
            <div class="action-wrap">
              <table-body-btn type="gwview"
                              :name="$t('home.view')"
                              @click.native="handleView(scope.row)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </list-layout>

</template>

<script>
import {
  getSpecimen,
  deleteSpecimen,
  getIdentification,
} from '@/api/specimenManagement/specimen'
import { listAllFactory } from '@/api/basic/factory'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'specimen',
  data () {
    return {
      historyList: [],
      fullscreen: false,
      historyShow: false,
      sampleStageList: [
        { val: "", name: "全部" }, { val: '1', name: "PPAP" }, { val: '2', name: "OTS" }, { val: '3', name: "TO" }
      ],
      sampleStateList: [
        { val: "", name: "全部" }, { val: '1', name: "使用中" }, { val: '2', name: "过期" }, { val: '3', name: "报废" }
      ],
      factoryList: [],
      tableHeight: 'calc(100vh - 498px)',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 1,
      // 表格数据
      planList: [],
      selectRows: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        materialName: undefined,
        supplierName: undefined,
        factoryName: undefined,
        materialCode: undefined,
        sampleStage: undefined,
        sampleState: undefined,
        sealingDate: undefined,
        params: {
          beginTime: undefined,
          endTime: undefined,
        },
      },
      dateRange: [],
    }
  },
  mounted () {
    this.getList()
    this.getFactoryList()
  },
  activated () {
    this.getList()
    this.getFactoryList()
  },
  computed: {
    ...mapState({
      isFold: (state) => state.app.isFold,
    }),
  },
  watch: {
    isFold (val) {
      if (val === true) {
        this.tableHeight = 'calc(100vh - 358px)'
      } else {
        this.tableHeight = 'calc(100vh - 498px)'
      }
    },
  },
  methods: {
    handleClose () {
      this.historyShow = false
    },
    getFactoryList () {
      listAllFactory().then((res) => {
        this.factoryList = res.data
      })
    },
    statusfilter (row) {
      if (row.sampleState) {
        let obj = this.sampleStateList.find(
          (item) => {
            return item.val == row.sampleState
          }
        )
        if (obj) {
          return obj.name
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    samplefilter (row) {
      if (row.sampleStage) {
        let obj = this.sampleStageList.find(
          (item) => {
            return item.val == row.sampleStage
          }
        )
        if (obj) {
          return obj.name
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      console.log('rowIndex', rowIndex, row)
      if (row.isHighLight === true) {
        console.log('rowIndex', row)
        return 'rowHighLight' //若isHighLight为true，则使用“rowHighLight”样式
      } else {
        return ''
      }
    },
    /* 列表 */
    getList () {
      this.loading = true
      getSpecimen(this.queryParams).then((response) => {
        if (response.code == 200 && response.rows) {
          this.planList = response.rows
          let selectRows = [...this.selectRows]
          if (selectRows.length > 0) {
            setTimeout(() => {
              this.planList.forEach((io) => {
                selectRows.forEach((ko) => {
                  if (io.id === ko.id) {
                    this.$refs.multipleTable.toggleRowSelection(
                      io,
                      true
                    )
                  }
                })
              })
            }, 300)
          }
          this.total = response.total
          this.loading = false
          this.tableHeight = this.isFold
            ? 'calc(100vh - 358px)'
            : 'calc(100vh - 498px)'
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      if (this.dateRange && this.dateRange.length) {
        this.queryParams.params.beginTime = this.dateRange[0]
        this.queryParams.params.endTime = this.dateRange[1]
      } else {
        this.queryParams.params.beginTime = ''
        this.queryParams.params.endTime = ''
      }
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = [];
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.$router.push({
        path: '/addSpecimen/index'
      })
    },
    handlePlanChange (selection) {
      this.selectRows = selection
      this.ids = selection.map((item) => item.id)
      console.log('this.ids', this.ids)
      this.planList.forEach((io, index) => {
        console.log('includes', this.ids.includes(io.id))
        if (this.ids.includes(io.id)) {
          io.isHighLight = true
        } else {
          io.isHighLight = false
        }
      })
    },

    /** 删除按钮操作 */
    handleDelete (row) {
      this.$modal.confirm(this.$t('formValidation.doYouConfirmDeletion')).then(() => {
        deleteSpecimen({ idList: row.id }).then((res) => {
          this.$modal.msgSuccess(this.$t('tips.deleteSuccess'))
          this.getList()
        })
      })
    },
    handleBatchDelete () {
      console.log(this.ids)
      if (this.ids.length === 0) {
        this.$modal.msgWarning('请至少选择一条删除!')
        return
      }
      this.$modal.confirm(this.$t('formValidation.doYouConfirmDeletion')).then(() => {
        deleteSpecimen({ idList: this.ids.join(',') }).then((res) => {
          this.$modal.msgSuccess(this.$t('tips.deleteSuccess'))
          this.getList()
        })
      })
    },
    handleScrap () {
      console.log(this.ids)
      if (this.ids.length === 0 || this.ids.length > 1) {
        this.$modal.msgWarning('请选择一条数据申请报废!')
        return
      }
      this.$router.push({
        path: '/scrap/index',
        query: {
          id: this.ids[0],
        }
      })
    },
    /** 查看按钮操作 */
    handleView (row) {
      this.$router.push({
        path: '/specimenCheck/index',
        query: {
          id: row.id,
        },
      })
    },
    /** 替换按钮操作 */
    handleEdit (row) {
      this.$modal.confirm('是否替换？').then(() => {
        this.$router.push({
          path: '/specimenDisplace/index',
          query: {
            id: row.id,
          }
        })
      })
    },
    history (row) {
      getIdentification({ identification: row.identification }).then((res) => {
        console.log(res.data)
        if (!!res.data) {
          this.historyList = res.data
          this.historyShow = true
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
  padding-top: 20px;
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding-bottom: 20px;
}
::v-deep .el-aside {
  padding: 0;
  margin-bottom: 0;
}
.content-style {
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  background-color: white;
  margin-top: 10px;
}
::v-deep .el-button-group .selBtn {
  background: #fff;
  border: 1px solid #0b7be3;
  color: #0b7be3;
}
::v-deep .el-button-group .unselBtn {
  background: #fff;
  border: 1px solid #ededf2;
  color: #666666;
}
.header-left {
  float: left;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 40px;
  display: flex;
  justify-content: center;
  border-bottom: 2px solid #0b7be3;
}
.header-right {
  float: right;
}
.container-header {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ededf2;
  padding-left: 12px;
}
.container-table {
  float: left;
  margin-top: 6px;
  width: 100%;
  overflow: auto;
}
.mb8 {
  float: left;
  margin-top: 6px;
  width: 100%;
}
.drawer-footer {
  display: flex;
  position: relative;
  z-index: 9999;
  bottom: -40px;
  height: 40px;
  justify-content: center;
  width: 100%;
}
.hign-line {
  position: relative;
  left: -8px;
  top: 14px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #0b7be3;
  float: left;
}
.drawer-close {
  background: #f7f8fa;
  border-color: #f7f8fa;
}
.submit-footer {
  height: 52px;
  background: #ffffff;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px 4px 0px 0px;
  position: fixed;
  z-index: 9;
  bottom: 0px;
  width: 100%;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.samplingPercent {
  position: absolute;
  z-index: 9;
  right: 20px;
}
::v-deep .el-card {
  padding-top: 0px;
  overflow: auto;
}
::v-deep .el-form-item__label {
  font-weight: 400;
  color: #999999;
}
.search {
  background: #20b09f;
  border-color: #20b09f;
}
::v-deep .rowHighLight {
  background: oldlace;
}
</style>
